<template>
  <div class="registerPage">
    <div class="register">
      <div class="logo">
        <div class="logo_content">
          <img alt="" src="./image/LOGO.png" />
          <span>用户注册</span>
        </div>
      </div>
      <div class="register_form">
        <el-form
          ref="form"
          v-model="form"
          :inline="true"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item
            label="姓名"
            style="margin-left: 80px; margin-top: 45px"
          >
            <el-input
              v-model="form.name"
              class="input-with-select"
              placeholder="请输入您的姓名"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" style="margin-left: 80px">
            <el-input
              v-model="form.nickName"
              class="input-with-select"
              placeholder="请输入您的姓名"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <!-- 账号同手机号 -->
          <el-form-item label="账号" style="margin-left: 80px">
            <el-input
              v-model="form.account"
              class="input-with-select"
              placeholder="账号同手机号"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <!-- 身份证号 -->
          <el-form-item label="身份证号" style="margin-left: 80px">
            <el-input
              v-model="form.idCard"
              class="input-with-select"
              placeholder="请输入您的身份证号"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <!-- 生日 -->
          <el-form-item label="生日" style="margin-left: 80px">
            <el-date-picker
              v-model="form.birthday"
              class="input-with-select"
              placeholder="请输入您的生日"
              style="width: 400px"
            ></el-date-picker>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别" style="margin-left: 80px">
            <el-select
              v-model="form.sex"
              class="input-with-select"
              placeholder="请选择您的性别"
              style="width: 400px"
            >
              <el-option label="男" value="M"></el-option>
              <el-option label="女" value="G"></el-option>
              <el-option label="未知" value="O"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone" style="margin-left: 80px">
            <el-input
              v-model="form.phone"
              class="input-with-select"
              placeholder="请输入您的手机号码"
              style="width: 400px"
            >
              <el-select
                slot="prepend"
                v-model="select"
                placeholder="请选择"
                size="small"
                style="width: 140px"
              >
                <el-option label="中国大陆 +86" value="+86"></el-option>
                <!-- <el-option label="中国大陆 +87" value="2"></el-option>
                <el-option label="中国大陆 +88" value="3"></el-option> -->
              </el-select>
            </el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password" style="margin-left: 80px">
            <el-input
              v-model="form.password"
              class="input-with-select"
              placeholder="请输入您的密码"
              style="width: 400px"
              type="password"
            ></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item
            label="确认密码"
            prop="confirmPassword"
            style="margin-left: 80px"
          >
            <el-input
              v-model="form.confirmPassword"
              class="input-with-select"
              placeholder="请再次输入您的密码"
              style="width: 400px"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code" style="margin-left: 80px">
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
              style="width: 400px"
            >
              <el-button
                slot="append"
                :disabled="state.smsSendBtn"
                style="color: #1289ff"
                @click="getCaptcha('form')"
                v-text="
                  (!state.smsSendBtn && '获取验证码') || state.time + ' s'
                "
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-left: 130px; margin-top: 20px">
            <el-checkbox v-model="checked" class="checkbox"></el-checkbox>
            <span style="margin-left: 14px"
            >已阅读并同意一下次协议<span
              style="color: #1289ff; cursor: pointer"
            >《隐私政策》</span
            >、<span style="color: #1289ff; cursor: pointer"
            >《法律声明》</span
            ></span
            >
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn"
              :disabled="isDisabled"
              type="primary"
              @click="submitForm('form')"
            >注册
            </el-button>
          </el-form-item>
          <div style="margin-left: 100px">
            <el-link
              href="/mall/container"
              :underline="false"
              icon="el-icon-refresh-lef"
              type="primary"
            >
              返回首页
            </el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { getPhoneCode, userRegister } from '@/framework/api/user'

export default {
  name: 'RegisterPage',
  /* 注册组件 */
  components: {},
  /* 接受父组件传过来的数据 */
  props: {},

  /* 数据 */
  data() {
    return {
      isDisabled: false,
      interval: null,
      checked: false,
      form: {
        phone: '',
        code: '',
        password: '',
        name: '',
        nickName: '',
        account: '',
        idCard: '',
        birthday: '',
        confirmPassword: '',
        sex: ''
      },

      select: '+86',
      state: { time: 60, smsSendBtn: false },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '请输入正确的手机号',
            pattern: /^1[3456789]\d{9}$/,
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '请输入正确的验证码', trigger: 'blur' }
        ],
        password: [
          // 4到20位，必须包含数字、大写字母或者小写字母
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 数字、大写字母或者小写字母
          {
            min: 4,
            max: 20,
            message: '4到20位，必须包含数字、大写或小写字母',
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/,
            trigger: 'blur'
          }
        ],
        // 确认密码，判断是否和密码一致
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {},

  /* 挂载阶段 */
  mounted() {},

  /* 销毁 */
  destroyed() {},

  /* 方法 */
  methods: {
    // 获取验证码
    getCaptcha(formName) {
      this.$refs[formName].validateField('phone', (valid) => {
        if (!valid) {
          this.state.smsSendBtn = true
          // 定义一个定时器，每1000ms减1
          this.interval = window.setInterval(() => {
            // 如果减到0，则停止定时器，同时将按钮状态改为false
            if (this.state.time-- <= 0) {
              this.state.time = 60
              this.state.smsSendBtn = false
              window.clearInterval(this.interval)
            }
          }, 1000)
          getPhoneCode({ phone: this.form.phone, type: 1 }).then((res) => {
            if (res.code === '00000') {
              this.$message.success('验证码发送成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isDisabled = true
          this.state.smsSendBtn = false
          this.state.time = 60
          window.clearInterval(this.interval)
          if (this.checked) {
            // 删除 confirmPassword
            // delete this.form.confirmPassword
            userRegister(this.form)
              .then((res) => {
                if (res.code === '00000') {
                  this.$message.success('注册成功')
                  this.isDisabled = false
                  // 提交成功后，重置表单
                  this.$refs[formName].resetFields()
                  window.location.href = '/login?redirect=mall%2Fcontainer'
                }
              })
              .catch(() => {
                this.isDisabled = false
              })
          } else {
            this.$message.error('请勾选协议')
          }
        } else {
          this.$message.error('请填写完整信息')
        }
      })
    }
    // 再次确认密码
    // handleChange(val) {
    //   if (this.Apassword !== this.form.password) {
    //     this.$refs[val].validateField('Apassword', (valid) => {
    //       if (!valid) {
    //         this.$message.error('两次输入密码不一致')
    //       }
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.registerPage {
  .register {
    width: 100%;
    // 兼容 edge
    min-width: 1920px;
    height: 100%;

    .logo {
      width: 1920px;
      height: 100px;
      background: #fff;

      .logo_content {
        height: 55px;
        margin-top: 26px;
        margin-left: 340px;
        line-height: 55px;

        img {
          width: 233px;
          margin-right: 14px;
        }

        span {
          font-size: 24px;
          height: 55px;
          color: #000;
          display: inline;
          vertical-align: top;
        }
      }
    }

    .register_form {
      margin: 20px auto 0;
      // 适配 edge
      height: 800px;
      width: 670px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 6px #0000001a;

      ::v-deep .el-checkbox {
        // 选框
        .el-checkbox__inner {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          // 中间的 “✔” 的位置调整
          &::after {
            left: 5px;
            top: 2px;
          }
        }
      }

      .btn {
        width: 230px;
        height: 45px;
        border-radius: 22.5px;
        background: #1289ff;
        margin-left: 220px;
      }

      .checkbox {
        border-radius: 14px;
      }
    }
  }
}
</style>
